<script setup lang="ts">
import Center from '~/assets/imgs/invitation-spin/icon.png';
import { tipsState, useList } from '../hooks';

const { status } = useList();
</script>

<template>
  <div v-if="(status?.count ?? 0) !== 0 && tipsState" class="titp shadow-[0_0_8_0_rgba(0, 0, 0, 0.50)] flex cursor-pointer items-center justify-center gap-2 border border-sys-text-marker rounded-[9999px] border-solid px-4 py-1.5 word-spacing-normal" @click="onClick">
    <img :src="Center" class="w-7.5 object-cover"> {{ (status?.count ?? 0) }} Sorteio
  <!--  todo -->
  </div>
</template>

<style scoped lang="scss">
.titp {
  background: radial-gradient(84.02% 123.6% at 16.73% -9.06%, rgba(234, 179, 8, 0.2) 0%, rgba(19, 20, 22, 0.2) 68.89%),
    #26272e;
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 15%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #cc9c07;

    @media bp-lt-tabletl {
      left: 8%;
    }
  }
}
</style>
